<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String context = request.getContextPath();
    System.out.println(context);
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>spring-boot+jsp+vue+easyui项目模板</title>
</head>
<%--easyui 相关--%>
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>

<%--vue相关--%>
<script type="text/javascript" src="/vue/vue.js"></script>

<%--element-ui  相关--%>
<%--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--%>
<%--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--%>

<%--layui  相关--%>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
<script type="text/javascript" src="/layui/layui.js"></script>

<%--bootstrap  相关--%>
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/bootstrap/popper.min.js"></script>

<body>
<div id="app">
    <hr/>
    <h2>element-ui 组件应用</h2>
    <%--    <el-button @click="visible = true">Button</el-button>--%>
    <hr/>

    <h2>easyui 组件应用 </h2>
    <div id="container" @click="showMsg()">
        {{message}}
    </div>
    <hr/>

    <h2>layui 组件应用</h2>
    <div>
        <button type="button" class="layui-btn" @click="showDate()">获取当前时间</button>
    </div>
    <hr/>

    <h2>bootstrap 组件应用</h2>
    <div class="mb-3 row">
        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input class="form-control" type="text"  id="staticEmail"  v-model="message">
        </div>
    </div>
</div>

</body>
<script type="text/javascript">

    //初始化vue对象
    new Vue({
        el: "#app",
        data: {
            visible: true,
            date: new Date().toLocaleString(),
            message: "J4n for spring-boot+jsp+vue+easyui 项目模板",
        },
        methods: {
            //layui
            showDate() {
                let message = this.date;
                layui.use('layer', function () {
                    let layer = layui.layer;
                    layer.msg(message); // 使用Layui的layer模块显示日期消息框
                });
            },
            //easyui
            showMsg() {
                $.messager.confirm({
                    title: '消息标题',
                    msg: this.message
                });
            }
        },
        mounted: function () {
            //将easyui组件挂载到vue中
            $('#container').panel({
                width: 500,
                height: 150,
                title: 'Panel'
                //方式1在挂载时进行属性赋值 或者直接在html通过vue语法赋值 {{message}}
                // content: this.message
            });
        }
    })
</script>
</html>